import { useMemo } from 'react';
import { useWindowWidth } from './useWindowWidth';

export function useBreakpoints() {
  // breakpoints: 1600 1200 1024 768 640 480 375 320
  // breakpoints:  xxl   xl  lg  mdl mdm mds sm  xs
  const width = useWindowWidth();

  const breakpoints = useMemo(() => {
    const breakValueOf = <
      T extends 1600 | 1200 | 1024 | 768 | 640 | 480 | 375 | 320,
    >(
      breakWidth: T
    ) => {
      return {
        width: breakWidth,
        up: width >= breakWidth,
        down: width < breakWidth,
      };
    };

    const _breakpoints = {
      xxl: breakValueOf(1600),
      xl: breakValueOf(1200),
      lg: breakValueOf(1024),
      md: breakValueOf(768),
      md2: breakValueOf(640),
      md3: breakValueOf(480),
      sm: breakValueOf(375),
      xs: breakValueOf(320),
    };

    return _breakpoints;
  }, [width]);

  return breakpoints;
}
